import Vuex from "vuex";
import Vue from "vue";

//使用Vuex这个插件
Vue.use(Vuex);

//实例化一个仓库
const store = new Vuex.Store({
  //状态配置
  state: {
    count: 0,
    price: 100,
    num: 0,
  },

  

  //对状态的修改配置(mutations是唯一修改vuex中state的途径)
  mutations: {
    /* mutations中的方法接受的第一个参数就是当前的vuex的状态数据state */
    /* 我们可以直接在mutations直接对state数据修改即可 */
    incrementCount(state) {
      state.count++;
    },
    /* mutations中的事件函数的第二个参数就是被commit时传递的参数 */
    incrementNCount(state, { n }) {
      state.count += n;
    },

    //我们不会在mutations中异步修改数据(数据可以被修改，但是工具无法响应式获取到修改)
    /* incrementWaitCount(state) {
      setTimeout(() => {
        state.count++;
      }, 2000);
    }, */
  },

  //vuex中有一个getters配置项,其实就是vuex中的计算属性
  getters: {
    //getters函数接受的第一个参数就是当前的state状态数据
    allPrice(state) {
      return state.count * state.price;
    },
  },
});

export default store;
